import React from 'react';
import { useState, useEffect, useLayoutEffect } from 'react';
const Father = () => {
    const [msg, setMsg] = useState('李寻欢');
    // 二者之间, 优先选择useEffect. 二者语法结构一样

    // 有一个变化过程 从 李寻欢=> 小李飞刀的变化过程
    // useEffect(() => {
    //     let i = 0;
    //     while (i < 1000000000) {
    //         i++
    //     }
    //     setMsg('小李飞刀')

    // }, [])

    // 看不到 李寻欢=> 小李飞刀的变化过程. 他是同步执行.
    useLayoutEffect(() => {
        let i = 0;
        while (i < 1000000000) {
            i++
        }
        setMsg('小李飞刀')
    }, []);

    return (
        <div>
            <p>{msg}</p>
        </div>
    );
}

export default Father;
